<!-- 面包屑 -->
<template>
  <div class="breadcrumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="item in breadList"
                          :key="item"
                          :to="{ path: item.path }">{{ item.meta.title }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data () {
    return {
      breadList: []
    }
  },
  watch: {
    $route (to, from) {
      // console.log(to.matched.length)
      // if (to.matched[0] === to.matched.)
      // this.breadList = to.matched
      this.breadCrumbsData(to.matched)
    }
  },
  created () {
    // this.breadList = this.$route.matched
    this.breadCrumbsData(this.$route.matched)
  },
  methods: {
    breadCrumbsData (arg) {
      this.breadList = []
      for (var i = 0; i < arg.length; i++) {
        if (arg[i].name !== 'Home') { this.breadList.push(arg[i]) }
      }
    }
  }
}
</script>

<style lang='less' scoped>
.breadcrumb .el-breadcrumb {
  line-height: 3;
}
</style>
